<!-- views/ChatView.vue -->
<template>
  <div class="chat-page">
    <!-- 头部 -->
    <header class="header">
      <Header  :title="'聊天室'" :showBack="true" />
    </header>

    <!-- 主体内容 -->
    <div class="main-content">
      <!-- 左侧侧边栏 -->
      <Aside />

      <!-- 中间聊天窗口 -->
      <main class="chat-main">
        <Chat />
      </main>

      <!-- 右侧用户列表 -->
      <aside class="user-list">
        <UserList />
      </aside>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header.vue';
import Aside from '@/components/Aside.vue'; // 注意引入的是 Aside.vue
import Chat from '@/components/Chat.vue';
import UserList from '@/components/UserList.vue';

export default {
  name: 'ChatView',
  components: {
    Header,
    Aside,
    Chat,
    UserList
  }
};
</script>

<style scoped>
.chat-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  height: 60px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.chat-main {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  transition: margin-left 0.3s ease;
}

.user-list {
  width: 200px;
  background-color: #f9fafc;
  border-left: 1px solid #e8e8e8;
}
</style>